<template>
 <el-dialog
   :title="'详情'"
   :visible.sync="dialogVisible"
   width="700px"
   :close-on-click-modal="false"
 >
   <el-form style="padding-left: 10px; padding-right: 10px" :model="model" :rules="rules" ref="ruleForm" label-position="left" label-width="150px" class="demo-ruleForm el-form-col" >
     <el-row :gutter="15">
       <el-col :span="12">
         <el-form-item label="仓库编号:" prop="name">
           {{model.code}}
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="仓库类型:" prop="name">
           {{model.warehouseType === 1 ? '收货仓':'落货仓'}}
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="仓库名称:" prop="name">
           {{model.name}}
         </el-form-item>
       </el-col>
       <el-col :span="24">
         <el-form-item label="仓库地址:" prop="address">
           {{model.addressShow}}
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="仓库面积:" prop="houseArea">
           {{model.houseArea}}㎡
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="仓库人员:" prop="houseAdminUser">
           {{model.houseAdminUser}}
         </el-form-item>
       </el-col>
       <el-col v-if="model.warehouseType == 1" :span="24">
         <el-form-item label="覆盖区域:" :rules="[
           {trigger: 'change', type: 'array'}
         ]" prop="coverageAreaNoList">
           <el-checkbox-group class="checkbox-margin-left" v-model="model.coverageAreaNoList">
             <el-checkbox :disabled="true" v-for="item in model.coverageAreaNoList" :key="item" :label="item">{{ item }}
             </el-checkbox>
           </el-checkbox-group>
         </el-form-item>
       </el-col>
       <el-col v-if="model.warehouseType == 1" :span="24">
         <el-form-item label="是否默认为线路起点:" prop="isDefault">
           {{model.isDefault === 1 ? '是':'否'}}
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="创建人:" prop="name">
           {{model.founder}}
         </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="创建时间:" prop="name">
           {{model.foundDate | unixTimestampFilter('YYYY-MM-DD HH:mm:ss')}}
         </el-form-item>
       </el-col>
     </el-row>
   </el-form>
   <div slot="footer" class="dialog-footer">
     <el-button type="primary" @click="modify" >修 改</el-button>
   </div>
 </el-dialog>
</template>

<script>
import {unixTimestampFilter} from '@/filters'
import {copy, dotData} from '@/utils'
import {mapActions} from 'vuex'
export default {
  name: 'DetailsDialog',
  filters: {
    unixTimestampFilter
  },
  props: {
    warehouseData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      setModelLoading: false,
      houseAdminUserArr: [],
      model: {
        id: '',
        name: '',
        founder: '',
        code: '',
        houseArea: '',
        foundDate: '',
        houseAdminUser: '',
        address: [],
        addressShow: '',
        houseAddress: '',
        coverageAreaNoList: [],
        warehouseType: 1,
        isDefault: 0
      },
      rules: {
      },
      districtArr: []
    }
  },
  computed: {
    modelCityNo() {
      return dotData(this.model, 'address[1]')
    },
    isEdit() {
      return !!dotData(this.warehouseData, 'id')
    }
  },
  watch: {
    modelCityNo(val, oldVal) {
      if (val === oldVal) {
        return
      }
      if (this.setModelLoading) {
        return
      }
      this.httpGetDistrictArr(val)
    }
  },
  created() {
    this.getWorker()
  },
  methods: {
    querySearch(queryString, cb) {
      this.getWorker(queryString).then(response => {
        response.forEach(item => {
          item.value = item.workerName
        })
        cb(response)
      })
    },
    getWorker() {
      this.model.houseAdminUser = ''
      return this.$ajax.get('/ms-warehouse-order/resourceManage/selectWorkers', {name: ''}).then(response => {
        this.houseAdminUserArr = response.data || []
      })
    },
    handleSelect(item) {
      this.model.houseAdminUser = item.workerName
    },
    show() {
      this.dialogVisible = true
      this.setModelLoading = true
      this.$nextTick(_ => {
        if (this.warehouseData.id) {
          this.model.id = dotData(this.warehouseData, 'id')
          this.model.name = dotData(this.warehouseData, 'name')
          this.model.code = dotData(this.warehouseData, 'code')
          this.model.founder = dotData(this.warehouseData, 'founder')
          this.model.houseArea = dotData(this.warehouseData, 'houseArea')
          this.model.foundDate = dotData(this.warehouseData, 'foundDate')
          this.model.houseAdminUser = dotData(this.warehouseData, 'houseAdminUser')
          let addressArr = []
          if (dotData(this.warehouseData, 'houseProvinceNo')) {
            addressArr.push(dotData(this.warehouseData, 'houseProvinceNo'))
            if (dotData(this.warehouseData, 'houseCityNo')) {
              addressArr.push(dotData(this.warehouseData, 'houseCityNo'))
              if (dotData(this.warehouseData, 'houseDistrictNo')) {
                addressArr.push(dotData(this.warehouseData, 'houseDistrictNo'))
              }
            }
          }
          this.model.address = addressArr
          if (this.model.address) {
            this.model.addressShow = dotData(this.warehouseData, 'houseProvince') + dotData(this.warehouseData, 'houseCity') + dotData(this.warehouseData, 'houseDistrict') + dotData(this.warehouseData, 'houseAddress')
          }
          this.model.warehouseType = dotData(this.warehouseData, 'warehouseType')
          this.model.houseAddress = dotData(this.warehouseData, 'houseAddress')
          this.model.isDefault = dotData(this.warehouseData, 'isDefault')
          const coverageAreaNo = dotData(this.warehouseData, 'coverageArea')
          if (coverageAreaNo && typeof coverageAreaNo === 'string') {
            this.model.coverageAreaNoList = coverageAreaNo.split(',')
          }
        } else {
          if (this.$refs.ruleForm) {
            this.$refs.ruleForm.resetFields()
          }
          this.districtArr = []
        }
        this.$nextTick(_ => {
          this.setModelLoading = false
          // 触发覆盖区域地址获取
          this.httpGetDistrictArr(this.modelCityNo, false)
        })
      })
    },
    hide() {
      this.dialogVisible = false
    },
    modify() {
      this.hide()
      this.$emit('showUpdate')
    },
    sumit() {
      this.$refs['ruleForm'].validate(valid => {
        if (!valid) { return }
        let data = copy(this.model, true)
        if (this.warehouseData.id) {
          data.operation = 'update'
        } else {
          data.operation = 'insert'
        }
        // 省市区处理
        if (Array.isArray(data.address)) {
          data.houseProvinceNo = dotData(data.address, 0)
          data.houseCityNo = dotData(data.address, 1)
          data.houseDistrictNo = dotData(data.address, 2)
          data.houseProvince = dotData(data.address, 0)
          data.houseCity = dotData(data.address, 1)
          data.houseDistrict = dotData(data.address, 2)
          delete data.address
        }
        if (this.model.warehouseType !== 1) {
          delete data.isDefault
        }
        this.loading = true
        this.$ajax.post('/ms-warehouse-order/ch-warehouse-manager/operateWarehouse', data).then(response => {
          this.loading = false
          if (response.success) {
            this.hide()
            this.$emit('refresh')
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
          }
        })
      })
    },
    // 获取覆盖区域
    httpGetDistrictArr(val, clearModel = true) {
      if (this.model.warehouseType === 1) {
        if (clearModel) {
          this.model.coverageAreaNoList = []
        }
        if (val) {
          this.getAddressData({value: val}).then(arr => {
            this.districtArr = arr
          })
        }
      }
    },
    ...mapActions([
      'getAddressData'
    ])
  }
}
</script>

<style scoped>

</style>
